<template>
  <view class="user-container">
    <!-- 顶部用户信息区域 -->
    <view class="header" :style="{ backgroundImage: `url(${backgroundImage})` }">
      <view class="user-info-section">
        <view class="user-info row-between">
          <view class="info row">
            <view class="avatar-container" @click="handleToAvatar">
              <u-avatar
                :src="avatar || '/static/images/default-avatar.png'"
                size="80"
                class="avatar"
              ></u-avatar>
            </view>
            <view class="user-details" v-if="isUserLoggedIn" @click="handleToInfo">
              <view class="name-row">
                <text class="name">{{ name }}</text>
                <image v-if="userLevel" :src="levelIcon" class="level-img"></image>
              </view>
              <view class="user-intro">
                <text class="intro-text">{{ userIntro || '这个人很懒，没留下什么' }}</text>
              </view>
            </view>
            <view class="login-section" v-else @click="handleToLogin">
              <view class="login-text">点击登录</view>
              <view class="login-desc">登录后享受更多功能</view>
            </view>
          </view>
          <view class="user-actions">
            <view class="action-btn" @click="handleMessage">
              <u-icon name="bell" color="#fff" size="24"></u-icon>
            </view>
            <view class="action-btn" @click="handleToSetting">
              <u-icon name="setting" color="#fff" size="24"></u-icon>
            </view>
          </view>
        </view>

        <!-- 会员信息 -->
        <view class="member-section" v-if="isUserLoggedIn">
          <view class="member-entry row-between">
            <view class="member-info row">
              <u-icon name="vip" color="#FFD700" size="20"></u-icon>
              <text class="member-text">{{ memberType || '普通用户' }}</text>
            </view>
            <view class="member-action row" @click="handleMemberCenter">
              <text class="action-text">会员中心</text>
              <u-icon name="arrow-right" color="#999" size="16"></u-icon>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 我的账号统计 -->
    <view class="my-assets" v-if="isUserLoggedIn">
      <view class="assets-title">我的账号</view>
      <view class="stats-row">
        <view class="stat-item" @click="handleMyFans">
          <view class="stat-num">{{ userStats.fansCount || 0 }}</view>
          <view class="stat-label">粉丝</view>
        </view>
        <view class="stat-item" @click="handleMyFollows">
          <view class="stat-num">{{ userStats.followCount || 0 }}</view>
          <view class="stat-label">关注</view>
        </view>
        <view class="stat-item" @click="handleMyPosts">
          <view class="stat-num">{{ userStats.postCount || 0 }}</view>
          <view class="stat-label">帖子</view>
        </view>
        <view class="stat-item" @click="handleMyPoints">
          <view class="stat-num">{{ userStats.points || 0 }}</view>
          <view class="stat-label">积分</view>
        </view>
      </view>
    </view>

    <!-- 我的服务 -->
    <view class="service-section">
      <view class="section-title">我的服务</view>
      <view class="service-grid">
        <view class="service-item" @click="handleMyCircles">
          <view class="service-icon-container">
            <u-icon name="grid" color="#667eea" size="32"></u-icon>
          </view>
          <text class="service-text">我的圈子</text>
        </view>
        <view class="service-item" @click="handleMyPosts">
          <view class="service-icon-container">
            <u-icon name="file-text" color="#43e97b" size="32"></u-icon>
          </view>
          <text class="service-text">我的帖子</text>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
import { isLoggedIn, requireLogin, getUserInfo } from '@/utils/auth'

export default {
  data() {
    return {
      name: '',
      avatar: '',
      userIntro: '',
      isUserLoggedIn: false,
      backgroundImage: 'https://pic.linfeng.tech/test/20240519/290fd07445aa44bf900e2893070d3a79.png',
      userLevel: 1,
      levelIcon: 'https://demo.linfeng.tech/resource/vip/level_1.png',
      memberType: '普通用户',
      userStats: {
        fansCount: 0,
        followCount: 0,
        postCount: 0,
        points: 0
      }
    }
  },

  onShow() {
    this.checkLoginStatus()
    if (this.isUserLoggedIn) {
      this.loadUserStats()
    }
  },

  onLoad() {
    this.checkLoginStatus()
  },

  methods: {
    // 检查登录状态
    checkLoginStatus() {
      this.isUserLoggedIn = isLoggedIn()

      if (this.isUserLoggedIn) {
        const userInfo = getUserInfo()
        if (userInfo) {
          this.name = userInfo.name || userInfo.username || '用户'
          this.avatar = userInfo.avatar || ''
          this.userIntro = userInfo.intro || ''
        }
      } else {
        this.name = ''
        this.avatar = ''
        this.userIntro = ''
      }
    },

    // 加载用户统计数据
    async loadUserStats() {
      try {
        // 模拟数据，实际项目中可以调用API获取
        this.userStats = {
          fansCount: 0,
          followCount: 0,
          postCount: 0,
          points: 0
        }
      } catch (error) {
        console.error('加载用户统计失败:', error)
      }
    },

    // 基础功能
    handleToInfo() {
      requireLogin(() => {
        this.$tab.navigateTo('/pages/mine/info/index')
      })
    },

    handleToSetting() {
      this.$tab.navigateTo('/pages/mine/setting/index')
    },

    handleToLogin() {
      this.$tab.navigateTo('/pages/login')
    },

    handleToAvatar() {
      requireLogin(() => {
        this.$tab.navigateTo('/pages/mine/avatar/index')
      })
    },

    handleMessage() {
      requireLogin(() => {
        this.$tab.navigateTo('/pages/message/index')
      })
    },

    // 会员相关
    handleMemberCenter() {
      requireLogin(() => {
        this.showToast('会员中心开发中', 'info')
      })
    },

    // 我的内容
    handleMyCircles() {
      requireLogin(() => {
        this.$tab.navigateTo('/pages/mine/circles/index')
      })
    },

    handleMyPosts() {
      requireLogin(() => {
        this.$tab.navigateTo('/pages/mine/posts/index')
      })
    },

    // 社交功能
    handleMyFans() {
      requireLogin(() => {
        this.$tab.navigateTo('/pages/mine/fans/index')
      })
    },

    handleMyFollows() {
      requireLogin(() => {
        this.$tab.navigateTo('/pages/mine/follows/index')
      })
    },

    handleMyPoints() {
      requireLogin(() => {
        this.$tab.navigateTo('/pages/mine/points/index')
      })
    },

    // 工具方法
    showToast(title, type = 'default') {
      // 使用 uView 2.0 的 toast 方法
      this.$u.toast(title)
    }
  }
}
</script>

<style lang="scss" scoped>
page {
  background-color: #f8f9fa;
}

.user-container {
  min-height: 100vh;
  background-color: #f8f9fa;
}

/* 顶部用户信息区域 */
.header {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 20px 15px;
  color: white;
  position: relative;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1;
  }

  .user-info-section {
    position: relative;
    z-index: 2;
  }
}

.user-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}

.info {
  display: flex;
  align-items: center;
  flex: 1;
}

.avatar-container {
  margin-right: 15px;

  .avatar {
    border: 3px solid rgba(255, 255, 255, 0.8);
  }
}

.user-details {
  flex: 1;

  .name-row {
    display: flex;
    align-items: center;
    margin-bottom: 8px;

    .name {
      font-size: 20px;
      font-weight: bold;
      color: white;
      margin-right: 8px;
    }

    .level-img {
      width: 24px;
      height: 12px;
    }
  }

  .user-intro {
    .intro-text {
      font-size: 14px;
      color: rgba(255, 255, 255, 0.9);
      line-height: 1.4;
    }
  }
}

.login-section {
  flex: 1;

  .login-text {
    font-size: 18px;
    font-weight: bold;
    color: white;
    margin-bottom: 4px;
  }

  .login-desc {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
  }
}

.user-actions {
  display: flex;
  gap: 15px;

  .action-btn {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
  }
}

.member-section {
  .member-entry {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.15);
    padding: 12px 15px;
    border-radius: 8px;
    backdrop-filter: blur(10px);

    .member-info {
      display: flex;
      align-items: center;

      .member-text {
        font-size: 14px;
        color: white;
        margin-left: 8px;
      }
    }

    .member-action {
      display: flex;
      align-items: center;

      .action-text {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.8);
        margin-right: 5px;
      }
    }
  }
}

/* 我的账号统计 */
.my-assets {
  background: white;
  margin: 15px;
  border-radius: 12px;
  padding: 20px 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

  .assets-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
  }

  .stats-row {
    display: flex;
    justify-content: space-around;

    .stat-item {
      text-align: center;

      .stat-num {
        font-size: 20px;
        font-weight: bold;
        color: #333;
        margin-bottom: 5px;
      }

      .stat-label {
        font-size: 14px;
        color: #666;
      }
    }
  }
}

/* 我的服务 */
.service-section {
  background: white;
  margin: 0 15px 15px;
  border-radius: 12px;
  padding: 20px 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

  .section-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
  }

  .service-grid {
    display: flex;
    justify-content: space-around;
    margin: -5px;

    .service-item {
      padding: 15px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      background: #f8f9fa;
      border-radius: 12px;
      margin: 5px;
      flex: 1;
      max-width: 150px;

      .service-icon-container {
        width: 60px;
        height: 60px;
        background: rgba(255, 255, 255, 0.8);
        border-radius: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        border: 1px solid rgba(0, 0, 0, 0.05);
      }

      .service-text {
        font-size: 14px;
        color: #333;
        line-height: 1.2;
        font-weight: 500;
      }
    }
  }
}

/* 底部版权信息 */
.footer-info {
  text-align: center;
  padding: 20px 15px;

  .copyright, .website {
    font-size: 12px;
    color: #999;
    line-height: 1.5;
  }
}

/* 工具类 */
.row {
  display: flex;
  align-items: center;
}

.row-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 响应式设计 - 优化版 */
@media (max-width: 480px) {
  .user-container {
    padding: 0;
  }

  .header {
    padding: 15px;
    margin: 0;
  }

  .user-info {
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
  }

  .info {
    flex: 1;
    min-width: 0;
  }

  .avatar-container {
    margin-right: 10px;

    .avatar {
      width: 60px !important;
      height: 60px !important;
    }
  }

  .user-details, .login-section {
    flex: 1;
    min-width: 0;
  }

  .user-actions {
    flex-shrink: 0;
    gap: 8px;

    .action-btn {
      width: 35px;
      height: 35px;
    }
  }

  .my-assets, .service-section {
    margin: 10px;
    padding: 15px;
  }

  .service-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;

    .service-item {
      flex-direction: row;
      text-align: left;
      padding: 12px;
      max-width: none;
      width: 100%;

      .service-icon-container {
        width: 45px;
        height: 45px;
        margin-right: 12px;
        margin-bottom: 0;
        flex-shrink: 0;
      }

      .service-text {
        flex: 1;
        font-size: 15px;
      }
    }
  }

  .stats-row {
    gap: 5px;

    .stat-item {
      min-width: 50px;

      .stat-num {
        font-size: 16px;
      }

      .stat-label {
        font-size: 12px;
      }
    }
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  .user-container {
    max-width: 100%;
    padding: 0 10px;
  }

  .header {
    padding: 20px;
    margin: 10px 0 0;
    border-radius: 12px;
  }

  .my-assets, .service-section {
    margin: 15px 0;
    padding: 20px;
  }

  .service-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;

    .service-item {
      width: 100%;
      max-width: none;
      padding: 16px;

      .service-icon-container {
        width: 55px;
        height: 55px;
      }
    }
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .user-container {
    max-width: 700px;
    margin: 0 auto;
    padding: 20px;
  }

  .header {
    border-radius: 16px;
    margin-bottom: 20px;
  }

  .my-assets, .service-section {
    margin: 20px 0;
    padding: 25px;
    border-radius: 16px;
  }

  .service-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;

    .service-item {
      width: 100%;
      max-width: none;
      padding: 20px;

      .service-icon-container {
        width: 60px;
        height: 60px;
      }
    }
  }
}

@media (min-width: 1025px) {
  .user-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 30px;
  }

  .header {
    border-radius: 20px;
    margin-bottom: 25px;
    padding: 30px;
  }

  .my-assets, .service-section {
    margin: 25px 0;
    padding: 30px;
    border-radius: 20px;
  }

  .service-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;

    .service-item {
      width: 100%;
      max-width: none;
      padding: 25px;

      .service-icon-container {
        width: 65px;
        height: 65px;
      }

      .service-text {
        font-size: 15px;
      }
    }
  }

  .stats-row {
    .stat-item {
      .stat-num {
        font-size: 24px;
      }

      .stat-label {
        font-size: 16px;
      }
    }
  }
}

/* 确保在所有屏幕尺寸下都能正常显示 */
.service-grid {
  display: flex;
  flex-wrap: wrap;
  margin: -5px;

  .service-item {
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: #f8f9fa;
    border-radius: 12px;
    margin: 5px;
    flex: 1;
    min-width: 120px;
    max-width: 150px;
    transition: all 0.3s ease;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .service-icon-container {
      width: 60px;
      height: 60px;
      background: rgba(255, 255, 255, 0.8);
      border-radius: 15px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 12px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      border: 1px solid rgba(0, 0, 0, 0.05);
      transition: all 0.3s ease;
    }

    .service-text {
      font-size: 14px;
      color: #333;
      line-height: 1.2;
      font-weight: 500;
    }
  }
}

/* 统计数据的响应式优化 */
.stats-row {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 10px;

  .stat-item {
    text-align: center;
    flex: 1;
    min-width: 60px;
    padding: 5px;

    .stat-num {
      font-size: 20px;
      font-weight: bold;
      color: #333;
      margin-bottom: 5px;
      word-break: break-all;
    }

    .stat-label {
      font-size: 14px;
      color: #666;
      white-space: nowrap;
    }
  }
}

/* 用户信息区域的响应式优化 */
.user-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 10px;
}

.info {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 200px;
}

.user-details, .login-section {
  flex: 1;
  min-width: 0;

  .name, .login-text {
    word-break: break-word;
  }

  .intro-text, .login-desc {
    word-break: break-word;
    line-height: 1.4;
  }
}
</style>
